<template>
  <div>
    <div class="container">
      <div class="zone">
        <img src="/img/1598324627767.png" alt="" />
        <div class="details">
          <h4>三国志</h4>
          <p>类型：战争策略</p>
          <div>
            <span>官网</span>
            <button>进入</button>
          </div>
        </div>
      </div>
      <div class="zone">
        <img src="/img/1598324627767.png" alt="" />
        <div class="details">
          <h4>三国志</h4>
          <p>类型：战争策略</p>
          <div>
            <span>官网</span>
            <button>进入</button>
          </div>
        </div>
      </div>
      <div class="zone">
        <img src="/img/1598324627767.png" alt="" />
        <div class="details">
          <h4>三国志</h4>
          <p>类型：战争策略</p>
          <div>
            <span>官网</span>
            <button>进入</button>
          </div>
        </div>
      </div>
      <div class="zone">
        <img src="/img/1598324627767.png" alt="" />
        <div class="details">
          <h4>三国志</h4>
          <p>类型：战争策略</p>
          <div>
            <span>官网</span>
            <button>进入</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {}
</script>

<style lang="scss" scoped>
.container {
  width: 1200px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  .zone {
    width: 258px;
    height: 76px;
    border: 1px solid #f0f0f0;
    padding: 17px 18px;
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    img {
      border-radius: 5px;
    }
    .details {
      margin-left: 10px;
      width: 167px;
      h4 {
        margin-bottom: 5px;
      }
      div {
        margin-top: 5px;
        display: flex;
        justify-content: space-between;
        button {
          border-style: none;
          width: 60px;
          height: 25px;
          color: #f0f0f0;
          background-color: #fc7403;
        }
      }
    }
  }
}
</style>
